 
Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '../extjs4/examples/ux');
     
 

Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');

Ext.require('Ext.Panel.*');
Ext.require([
    'Ext.tip.QuickTipManager',
    'Ext.container.Viewport',
    'Ext.layout.*',
    'Ext.form.Panel',
    'Ext.form.Label',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.tree.*',
    'Ext.selection.*',
    'Ext.tab.Panel',
    'Ext.ux.layout.Center',
    'Ext.util.*',
    'Ext.toolbar.Paging',
    'Ext.ModelManager',
    'Ext.ux.PreviewPlugin' 
]);
 
Ext.onReady(function(){
Ext.tip.QuickTipManager.init(); 
 
 
    var layoutExamples = [];
    Ext.Object.each(getBasicLayouts(), function(name, example) {
        layoutExamples.push(example);
    });
 

    var contentPanel = {
         id: 'content-panel',
         region: 'center',  
         layout: 'card',
         margins: '2 5 5 0',
         activeItem: 0,
         border: false,
         items: layoutExamples
    };
     
    var eventStore = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true
        },
        proxy: {
            type: 'ajax',
            url: 'tree-data.json'
        }
    });

    var monitoringStore = Ext.create('Ext.data.TreeStore',{
        root: {
            expanded: true
        },
        proxy: {
            type: 'ajax',
            url: 'monitoring-data.json'
        }
    });
    
 
     var eventPanel = Ext.create('Ext.tree.Panel', {
        id: 'tree-panel',
        region:'north',
        split: true,
         minSize: 150,
        rootVisible: false,
        autoScroll: true,
        store: eventStore
    });

    var monitoringPanel = Ext.create('Ext.tree.Panel', {
        id: 'monitoring-panel',
        region:'north',
        split: true,
         minSize: 150,
        rootVisible: false,
        autoScroll: true,
        store: monitoringStore
    });
    
 
    eventPanel.getSelectionModel().on('select', function(selModel, record) {
        if (record.get('leaf')) {
            Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');
       }
    });

    monitoringPanel.getSelectionModel().on('select', function(selModel, record) {
        if (record.get('leaf')) {
            Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');
       }
    });    
 
 Ext.create('Ext.Viewport', {
  
            
                minWidth: 350,
                height: 500,
		renderTo:'show-btn',
                layout: 'border',
                bodyStyle: 'padding: 5px;',
        items: [{
            xtype: 'box',
            id: 'header',
            region: 'north',
            html: '<h1>Fraud Information Event Management</h1>',
            height: 30
        },{
             region: 'west',
                    title: 'Navigation',
                    width: 200,
                    split: true,
                    collapsible: true, 
			    items: [{  
		            title: 'Events',
		            width: 200,
		            split: true,
			    collapsed: true,
		            collapsible: true, 
			    items: eventPanel     
			    },{  
		            title: 'Monitoring',
		            width: 200,
		            split: true,
		            collapsible: true,
			    collapsed: true, 
			    items: monitoringPanel     
			    }

			    ],
                    floatable: false
        }, 
            contentPanel
        ],
	renderTo: Ext.getBody()
            });
    



});

